<template id="applySign">
    <div class="applySign">
      <form action="">
        <div class="row applyList">
          <div class="applyListInfo">
            <span class="col_333 ListInfoL">缴费编号</span>
            <span class="ListInfoR">{{apply_sign.feeId}}</span>
          </div>
        </div>

        <div class="row applyList">
          <div class="applyListInfo">
            <span class="col_333 ListInfoL">缴费人员</span>
            <span class="ListInfoR">{{apply_sign.feeUserName}}</span>
          </div>
        </div>

        <div class="row applyList">
          <div class="applyListInfo">
            <span class="col_333 ListInfoL">缴费单位</span>
            <span class="ListInfoR">{{apply_sign.cityName}}</span>
          </div>
        </div>

        <div class="row applyList">
          <div class="applyListInfo">
            <span class="col_333 ListInfoL">联系方式</span>
            <input type="number" class="contect" max="11" name="contect" id="contect" v-model="contect"  placeholder="请输入手机号码">
          </div>
        </div>

        <div class="row applyList">
          <div class="applyListInfo">
            <span class="col_333 ListInfoL">选择机构</span>
            <span id="trigger5"  class="row ListInfoR applyList">
              请选择
              <i class="icon iconfont icon-shangyiye-copy"></i>
            </span>
          </div>
        </div>

        <!--<div id="trigger5" class="row applyList">选择机构</div>-->

      </form>
      <input type="button" value="申请绑定"  class="signedBtn" @click="goApply">
    </div>
</template>

<script>

  import MobileSelect from 'mobile-select'


    export default {
        data(){
            return {
              apply_sign: {},
              contect:'',
              selectId: ''
            }
        },
        methods: {
          goApply: function () {

            if(this.validTest()){
              //申请绑定（添加缴费用户）
              var feeUser = {
                openAccount: sessionStorage.getItem('userId'),
                feeId: this.apply_sign.feeId,
                feeUserName: this.apply_sign.feeUserName,
                corpId: this.apply_sign.corpId,
                telNo: this.contect,
                deptId: this.selectId
              };

              var that = this;

              this.$post(this.$urlAll.apply_bind, feeUser).then(function (response) {

                let instance = that.$toast('操作成功');
                setTimeout(function () {
                  instance.close();
                  that.$router.push({path:'/pay/paySign'})
                }, 2000)
              })
            }
          },

          validTest: function () {
            var testForm = true;
            if(this.contect == ''){
              DbsAlert.show({
                title: '提示',
                text: '手机号不能为空'
              });
              return testForm = false;
            } else if(!(/^1[34578]\d{9}$/.test(this.contect))){
              DbsAlert.show({
                title: '提示',
                text: '手机号格式不对，请重写'
              });
              return testForm = false;
            }

            if(this.selectId == ''){
              DbsAlert.show({
                title: '提示',
                text: '机构不能为空'
              });
              return testForm = false;
            }

            return testForm;
          }
        },
      created:function () {
        this.apply_sign = this.$route.query;

        var that = this;


        this.$post(this.$urlAll.query_all_detp, {corpId: this.$route.query.corpId}).then(function (response) {

          var mobileSelect5 = new MobileSelect({
            trigger: '#trigger5',
            title: '机构选择',
            wheels: [
              {data: response.t}
            ],
            keyMap: {
              id:'deptId',
              value: 'deptName',
              childs :'mDept'
            },
            callback:function(indexArr, data){

              that.selectId = data[data.length-1].deptId;
            }
          });
        });
      }
    }
</script>

<style scoped>
  @import "../../style/common.css";
  @import "../../assets/css/iconfont.css";

  #trigger5{
    color: #666;
    line-height: 0.44rem;
  }


  .applyList{
    height: 0.44rem;
    background-color: #fff;
    padding-left: 0.1rem;
  }
  .applyListInfo{
    border-bottom: 1px solid #eee;
    width: 100%;
    position: relative;
  }
  .applyList span{
    line-height: 0.44rem;
    font-size: 0.14rem;
  }
  .ListInfoR{
    padding-right: 0.1rem;
    font-size: 0.13rem;
    color: #666;
    position: absolute;
    right: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

  }
  .contect{
    width: 1.15rem;
    height: 100%;
    border: none;
    position: absolute;
    right: 0.1rem;
    line-height: 0.44rem;
    color: #666;
    text-align: right;
  }

  .icon-sel {
    font-size: 0.35rem;
    position: absolute;
    right: 0.1rem;
    top: 50%;
    -webkit-transform: translateY(-47%);
    -moz-transform: translateY(-47%);
    -ms-transform: translateY(-47%);
    -o-transform: translateY(-47%);
    transform: translateY(-47%);
    color: #666;
  }
  .listSel{
    right: 0.35rem;
  }

  .signedBtn{
    width: 2.93rem;
    height: 0.44rem;
    border: none;
    background-color: #ff4444;
    font-size: 0.16rem;
    color: #fff;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    border-radius: 0.05rem;
    outline: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0.6rem;
  }

  .waring{
    padding-left: 0.2rem;
    color: #ff4444;
  }
  .isSel{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    left: 0;
    top: 0;
    z-index: -101;
  }
  .selBox{
    width: 2.7rem;
    height: 3.28rem;
    background-color: #ffffff;
    z-index: -100;
    position: fixed;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-border-radius:0.05rem;
    -moz-border-radius:0.05rem;
    border-radius:0.05rem;
    overflow: hidden;
  }
  .selBox ul{

  }
  .selBox ul li {
    padding:0 0.2rem;
    font-size: 0.14rem;
    color: #333;
    height: 0.45rem;
    line-height: 0.45rem;
    border-bottom: 1px solid #eee;
    list-style: none;
    position: relative;
  }
.icon-weixin{
  display: inline-block;
  height: 0.3rem;
  width: 0.3rem;
  background-image: url("../../assets/image/wechat.png");
  -webkit-background-size:0.3rem;
  background-size:0.3rem;
  background-repeat: no-repeat;
  margin-top: 0.075rem;
  margin-left: 0.05rem;
}

  .icon-bank{
    display: inline-block;
    height: 0.3rem;
    width: 0.3rem;
    background-image: url("../../assets/image/paysign3.png");
    -webkit-background-size:0.3rem;
    background-size:0.3rem;
    background-repeat: no-repeat;
    margin-top: 0.075rem;
    margin-left: 0.05rem;
  }
  .weixin{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .radio_box{

    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .radio_box input{
    opacity: 0;
  }
  .radio_box label{
    width:15px;
    height:15px;
    position:absolute;
    top:30%;
    right: 5%;
    border:2px solid #ef4949;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
  }

  .radio_box input:checked + label:after{
    content:'';
    width:9px;
    height:9px;
    position:absolute;
    top:3px;
    left:3px;
    background:#ef4949;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
  }

  .icon-shangyiye-copy{
    font-size: 0.3rem;
    color: #c9c9c9;
  }

</style>
